<template>
	<view class="uni-flex-column container">
		<z-paging ref="pagingRef" v-model="dataList" @query="queryList" class="pagingCon">
			<template #top>
				<view class="top uni-flex uni-align-center uni-justify-between">
					<view class="content">
						<view class="infoBox" @click="goMsgNotification">
							<image :src="`${$ImgBaseUrl}infoIcon.png`" mode="scaleToFill" class="infoIcon" />
							<view class="infoTip">99</view>
						</view>
						<view class="infoText">消息通知</view>
					</view>
					<view class="content">
						<view class="infoBox">
							<image :src="`${$ImgBaseUrl}activityIcon.png`" mode="scaleToFill" class="infoIcon" />
							<view class="infoTip">1</view>
						</view>
						<view class="infoText">优惠活动</view>
					</view>
					<view class="content" @click="goOrderInfo">
						<view class="infoBox">
							<image :src="`${$ImgBaseUrl}orderInfo.png`" mode="scaleToFill" class="infoIcon" />
						</view>
						<view class="infoText">订单信息</view>
					</view>
				</view>
			</template>
			<uni-swipe-action>
				<view class="bottom" v-for="i in dataList" :key="i"
					@tap="goChat(i.peerId,i.userId,i.peerAvatar,i.peerNikeName)">
					<uni-swipe-action-item>
						<view class="uni-flex chatBox">
							<image :src="i.peerAvatar" mode="aspectFill" class="chatIcon" />
							<view class="chatInfo">
								<view class="uni-flex uni-align-center uni-justify-between">
									<text class="chatName">{{i.peerNikeName}}</text>
									<text class="chatTime">{{i.lastTime}}</text>
								</view>
								<view class="uni-flex uni-align-center uni-justify-between">
									<text class="chatText">{{i.lastContent}}</text>
								</view>
							</view>
						</view>
						<template v-slot:right>
							<view class="deleteBtn uni-flex uni-align-center uni-justify-center"
								@click="deleteItem(i.id)"><uni-icons type="trash" size="30" color="#fff"></uni-icons>
							</view>
						</template>
					</uni-swipe-action-item>
				</view>
			</uni-swipe-action>
			<template #empty>
				<empty-view v-if="dataList.length === 0" />
			</template>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from "vue";
	import {
		queryMessageList
	} from "@/api/message";
	const noticeList = ref([]);
	const pagingRef = ref(null);
	// 响应式数据
	const dataList = ref([]);

	const deleteItem = (id) => {
		console.log('66')
		uni.showModal({
			title: "删除确认",
			content: `确定要删除该聊天吗`,
			confirmText: "狠心删除",
			cancelText: "我再想想",
			success: (res) => {
				if (res.confirm) {
					uni.showLoading({
						title: "正在删除...",
					});
					deleteChat(id).then((res) => {
						if (res.code === 200) {
							uni.showToast({
								title: "删除成功",
							});
							// 删除成功后刷新列表
							pagingRef.value?.reload();
						}
					}).catch(() => {
						uni.showToast({
							title: "删除失败",
							icon: "error",
						});
					});
				}
			},
		});
	};
	// 列表数据请求
	const queryList = async (pageNum, pageSize) => {
		console.log(pageNum, pageSize);
		try {
			// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			// 这里的pageNum和pageSize会自动计算好，直接传给服务器即可
			const params = {
				pageNum: pageNum,
				pageSize,
			};
			// 模拟请求服务器获取分页数据，请替换成自己的网络请求
			const res = await queryMessageList(params);
			// // 将请求的结果数组传递给z-paging
			pagingRef.value?.complete(res.rows || []);
		} catch (error) {
			console.error("请求失败:", error);
			// 如果请求失败写 pagingRef.value?.complete(false)
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写 uni.$emit('z-paging-error-emit') 即可
			pagingRef.value?.complete(false);
		}
	};

	const goChat = (peerId, userId, peerAvatar, peerName) => {
		console.log(peerId, userId, peerAvatar, peerName)
		uni.navigateTo({
			url: "/pages/chat/detail/index?peerId=" + peerId + "&userId=" + userId + "&peerNikeName=" +
				peerName,
		});
	};

	const goOrderInfo = () => {
		uni.navigateTo({
			url: "/pages/chat/detail/customerService?peerId=" + 6 + "&userId=" + 18 + "&peerNikeName=" +
				"小零客服",
		});
	};
	const goMsgNotification=()=>{
		uni.navigateTo({
			url:'/pages/chat/detail/msgNotification'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;

		.pagingCon {
			flex: 1;
			overflow-y: auto; // 添加滚动以防内容溢出

			.top {
				margin: 63rpx 0 48rpx;
				padding: 0 72rpx;

				.content {
					width: 120rpx;
					text-align: center;

					.infoBox {
						width: 108rpx;
						height: 108rpx;
						margin: 0 auto;
						position: relative;

						.infoIcon {
							width: 100%;
							height: 100%;
						}

						.infoTip {
							position: absolute;
							top: 0;
							right: 0;
							width: 32rpx;
							height: 32rpx;
							line-height: 32rpx;
							border-radius: 50%;
							background-color: #EB4747;
							font-weight: 400;
							font-size: 18rpx;
							color: #FFFFFF;
							text-align: center;
						}
					}

					.infoText {
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
						text-align: center;
						margin-top: 20rpx;
					}
				}
			}

			.bottom {
				.chatBox {
					padding: 36rpx 0;
					margin: 0 25rpx;
					border-bottom: 1rpx solid #E2E2E2;

					.chatIcon {
						width: 78rpx;
						height: 78rpx;
						border-radius: 50%;
						margin-right: 23rpx;
					}

					.chatInfo {
						flex: 1;

						.chatName {
							font-weight: 400;
							font-size: 30rpx;
							color: #303133;
							line-height: 42rpx;
							text-align: left;
						}

						.chatTime {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 33rpx;
						}

						.chatText {
							width: 90%;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 33rpx;
							margin-top: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}
				}

				.deleteBtn {
					width: 130rpx;
					height: 160rpx;
					background: #EB4747;
				}
			}
		}
	}
</style>